<template>
	<div>
	<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in data" :key="item.coid">
					<router-link :to="'/home/comments/commentInfo/'+item.coid">
						<img class="mui-media-object mui-pull-left" :src="item.usurl+item.uspic">
						<div class="mui-media-body">
							<h1>{{item.cotitle|dataLenth}}</h1>
							<p class='mui-ellipsis'>
								<span>发表人：{{item.usnickname}}</span>
								<span>发表时间：{{item.codates}}</span>
								<span>点击次数: {{item.cohitties}}</span>
							</p>
						</div>
					</router-link>
				</li>
			</ul>
</div>
</template>

<script>
import { Indicator } from 'mint-ui';
	export default {
		data(){
			return {
				data:[],
			};
		},
		created(){
			
			this.getComment();
		},
		methods:{
			getComment(){
				Indicator.open({
  					text: '加载中...',
  					spinnerType: 'fading-circle'
				});
				this.$http.get('lists/getComments').then(
					result=>{
						if(result.status==200){
							this.data=result.body.data;
							Indicator.close();
							//console.log(result);
						}else{
							Toast("请求数据失败！！！")
						}
					}
				)
			}
		},
		filters:{
			dataLenth:function(data){
				if(data.length>=21){
					//console.log(data.substring(0,21));
					return data.substring(0,21)+'...';
				}else{
					return data;
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.mui-table-view li h1{
		font-size: 14px;
	}
	.mui-table-view-cell{
		text-decoration: none;
	}
	.mui-ellipsis{
		font-size: 12px;
		color: #226aff;
		display: flex;
		justify-content: space-between;
	}
</style>